<template>
  <div class="dd">
    <Card title="业务介绍">
      <p>
        利用卫星进行森林火灾监测，对大面积森林的无死角、全天候、实时监控，不仅可以及早发现早期林火，特别是边远地区和人烟
        稀少地区的林火，而且可以对已发现的林火，特别是重大林火蔓延情况进行连续跟踪监测，为扑火提供辅助决策。
      </p>
    </Card>
    <Card title="基本信息">
      <el-form size="small" inline label-width="100px" :model="formB">
        <el-form-item label="客户名称">
          <el-input size="small" v-model="formB.valA"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="hanleClick">
            选取客户
          </el-button>
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input size="small" v-model="formB.valB"></el-input>
        </el-form-item>
        <el-form-item label="客户所在省">
          <el-input size="small" v-model="formB.valC"></el-input>
        </el-form-item>
        <el-form-item label="客户所在市">
          <el-input size="small" v-model="formB.valD"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input size="small" v-model="formB.valE"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="产品资费">
      产品资费：
      <el-input v-model="val" style="width: 400px" size="small">
        <template slot="append">元 / 年</template>
      </el-input>
    </Card>
    <Card title="选择属性">
      <el-checkbox-group v-model="checkedVal" style="line-height: 2">
        <el-checkbox
          v-for="(option, index) in valGroup"
          :label="option"
          :key="index"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
      <el-card
        v-if="checkedVal.length"
        title="产品属性"
        style="margin: 10px 0"
        shadow="never"
      >
        <section v-for="(item, index) in checkedVal" :key="item">
          <div class="title" style="fontweight: 600; margin-bottom: 10px">
            {{ item }}：
          </div>
          <el-form inline size="small" label-width="150px">
            <el-form-item label="license费单价">
              <el-input v-model="fdj[index].dj"></el-input>
            </el-form-item>
            <el-form-item label="license数">
              <el-input v-model="fdj[index].bj"></el-input>
            </el-form-item>
          </el-form>
        </section>
      </el-card>
      <Card title="一次性费用">
        <el-form size="small" label-width="180px" inline :model="formA">
          <el-form-item label="安装调试服务费单价">
            <el-input v-model="formA.valA" type="text" />
          </el-form-item>
          <el-form-item label="安装调试服务点数">
            <el-input v-model="formA.valB" type="text" />
          </el-form-item>
          <el-form-item label="现场运维服务费单价">
            <el-input v-model="formA.valC" type="text" />
          </el-form-item>
          <el-form-item label="现场运维服务费点数">
            <el-input v-model="formA.valD" type="text" />
          </el-form-item>
          <el-form-item label="响应服务费单价">
            <el-input v-model="formA.valE" type="text" />
          </el-form-item>
          <el-form-item label="响应服务次数">
            <el-input v-model="formA.valF" type="text" />
          </el-form-item>
        </el-form>
      </Card>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: {
    Card
  },

  data() {
    return {
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: '',
        valF: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: ''
      },
      show: false,
      checkedVal: ['双目防火探测系统（1km半径）'],
      valGroup: [
        '双目防火探测系统（1km半径）',
        '双目防火探测系统（3km半径）',
        '双目防火探测系统（5km半径）',
        '卫星遥感火情监测系统-A档（省级）',
        '卫星遥感火情监测系统-B档（地级市）',
        '卫星遥感火情监测系统-C档（区县级）'
      ],
      fdj: [
        {
          dj: 35000,
          bj: 0
        },
        {
          dj: 40000,
          bj: 0
        },
        {
          dj: 50000,
          bj: 0
        },
        {
          dj: 55000,
          bj: 0
        },
        {
          dj: 60000,
          bj: 0
        },
        {
          dj: 65000,
          bj: 0
        }
      ]
    }
  },

  computed: {
    val() {
      let sum = 0
      this.fdj.forEach(item => {
        sum += item.dj * item.bj
      })
      return sum
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
</style>
